<template>
    <!-- 注册页面的整体盒子 -->
    <div class="reg-container">
        <!-- 注册的盒子 -->
        <div class="reg-box">
            <!-- 标题的盒子 -->
            <div class="title-box"></div>
            <!-- 注册的表单区域 -->
            <!-- 保证正则生效的三要素
            1.model
            2.rules
            3.prop
            -->
            <el-form :model="regForm" :rules="regRules" ref="regForm" class="demo-regForm">
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名" v-model="regForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" type="password" v-model="regForm.password"></el-input>
                </el-form-item>
                <el-form-item prop="repassword">
                    <el-input placeholder="请再次输入密码" type="password" v-model="regForm.repassword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="reg" type="primary" style="width:100%;">注册</el-button>
                    <el-link @click="$router.push('/login')" type="info">去登录</el-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Reg',
    data() {
        const checkPwd = (rule, value, callback) => {
            if (this.regForm.repassword !== this.regForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        }
        return {
            // 数据表单对象
            regForm: {
                username: '',
                password: '',
                repassword: '',
            },
            regRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    //    { pattern: /^[0-9a-zA-Z]{1,10}$/
                    //  字母开头   { pattern: /^[a-zA-Z][0-9a-zA-Z]{0,9}$/
                    { pattern: /^[0-9a-zA-Z]{1,10}$/, message: '长度在 1 到 10 位字母数字', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { pattern: /^\S{6,15}$/, message: '密码必须是 6 到 10 位非空字符', trigger: 'blur' }
                ],
                repassword: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { pattern: /^\S{6,15}$/, message: '密码必须是 6 到 10 位非空字符', trigger: 'blur' },
                    { validator: checkPwd, trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        reg() {
            // 发请求注册
            this.$refs.regForm.validate(async valid => {
                // async必须写在await所在的函数声明前
                if (!valid)
                    return
                console.log('发请求');
                // const res = await this.$http.post('/api/reg', {
                //     username: this.regForm.username,
                //     password: this    .regForm.password,
                //     repassword: this.regForm.repassword,
                // })
                // console.log(res.data);
                // if (res.code == 1) {
                //     return this.$message.error(res.data.message)
                // } else if (res.code == 0) {
                //     // this.$message({
                //     //     message: '恭喜你，注册成功',
                //     //     type: 'success'
                //     // }) 
                //     this.$message.success(res.data.message)
                //     // 注册成功跳转登录页
                //     this.$router.push('./login')
                // }
                const res = await this.$http.post('/api/reg', this.regForm)
                console.log(res);
                if (res.data.code !== 0) return this.$message.error(res.data.message)
                this.$message.success(res.data.message)
                // 注册成功跳转登录页
                this.$router.push('./login')
                // if (res.data.code !== 0) {
                //     this.$message.error(res.data.message)
                // } else {
                //     this.$message.success(res.data.message)
                //     // 注册成功跳转登录页
                //     this.$router.push('./login')
                // }
            });
        }
    }
}
</script>

<style lang="less" scoped>
.reg-container {
    background: url('../../assets/images/login_bg.jpg') center;
    background-size: cover;
    height: 100%;

    .reg-box {
        width: 400px;
        height: 335px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 0 30px;
        box-sizing: border-box;

        .title-box {
            height: 60px;
            background: url('../../assets/images/login_title.png') center no-repeat;
        }
    }
}
</style>
